<template>
  <div class="cont-ya-content">
    <div class="header">
      <!-- <div class="title">轮询预案</div> -->
      <div class="close" @click="emit('close')">X</div>
    </div>
    <div class="centerBox">
      <div class="title">预案列表</div>
      <div class="newBox" @click="tonew">
        <el-icon><Plus /></el-icon>
        <span class="name">新建预案</span>
      </div>
    </div>

    <div class="content">
      <div class="header-list">
        <span class="header-cell">预案名称</span>
        <span class="header-cell">预案分类</span>
        <span class="header-cell">操作</span>
      </div>
      <div class="list">
        <di class="list-item" v-for="(item, index) in state.data" :key="index">
          <span class="list-cell">{{ item.planName }}</span>
          <span class="list-cell">{{ item.planName }}</span>
          <span class="list-cell">
            <span class="btns" @click="toview(item)">开始轮巡</span>
            <span class="btns" @click="toedit(item)">编辑</span>
            <span class="btns" @click="todel(item)">删除</span>
          </span>
        </di>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ElMessage, ElMessageBox } from "element-plus";
import { nextTick } from "vue";
const props = defineProps({
  oneData: Object,
});
const emit = defineEmits(["close", "view", "new"]);
const state = reactive({
  time: 3,
  plans: [],
  pm: {},
  data: [],
});
const handleSelectionChange = (val) => {
  state.plans = val;
};

const toview = (val) => {
  // if (state.plans.length < 1) {
  //   ElMessage.error("请选择预案");
  //   return;
  // }
  // let store = useMyStore();
  // store.params.yav = { time: state.time, plans: state.plans };
  // emit("view");
  let store = useMyStore();
  store.params.yav = { time: state.time, plans: [val] };
  emit("view");
};
const getData = () => {
  useApi.post("/dynamicview/ar/inspection/list", {}).then((res) => {
    state.data = res.data.inspectionPlans;
  });
};

// 点击“新建预案”
const tonew = () => {
  emit("close");
  // 再打开新增弹窗
  emit("addPlan");
};

const toedit = (item) => {
  let store = useMyStore();
  store.params.ya = item;
  console.log(store.params.ya);
  emit("close");
  // 再打开新增弹窗
  emit("addPlan");
};
const todel = (item) => {
  let pm = {
    optType: "D",
    planId: item.planId,
  };
  ElMessageBox.confirm("确认删除当前记录？", "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    useApi.post("/dynamicview/ar/inspection/edit", pm).then((res) => {
      getData();
    });
  });
};
onMounted(() => {
  getData();
});
</script>

<style lang="scss" scoped>
.cont-ya-content {
  width: 700px;
  height: 640px;
  background: url("/images/new/lxyaBg.png") no-repeat;
  background-size: 100% 100%;
  .header {
    width: 100%;
    height: 50px;
    position: relative;
    .close {
      position: absolute;
      right: 45px;
      top: 31px;
      width: 35px;
      height: 35px;
      color: #ffffff;
      font-size: 30px;
      text-align: center;
      line-height: 35px;
    }
  }
  .centerBox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 40px 0px 38px;
    .title {
      font-family: PingFangSC, PingFang SC;
      font-weight: 300;
      font-size: 23px;
      color: #ffffff;
      line-height: 40px;
      letter-spacing: 3px;
      text-align: left;
      font-style: normal;
    }
    .newBox {
      width: 165px;
      height: 50px;
      display: flex;
      align-items: center;
      background: url("/images/new/newBtn.png") no-repeat;
      background-size: 100% 100%;
      cursor: pointer;
      .el-icon {
        color: #ffffff;
        font-size: 25px;
        margin: 0px 13px;
        font-weight: 600;
      }
      .name {
        font-family: PingFangSC, PingFang SC;
        font-weight: 300;
        font-size: 23px;
        color: #ffffff;
        line-height: 40px;
        letter-spacing: 3px;
        text-align: left;
        font-style: normal;
      }
    }
  }
  .content {
    margin-top: 20px;
    padding: 0 40px 50px 38px;
    .header-list {
      width: 100%;
      height: 40px;
      background: url("/images/new/headercellbox.png") no-repeat;
      background-size: 100% 100%;
      margin-bottom: 6px;
      .header-cell {
        display: inline-block;
        font-family: PingFangSC, PingFang SC;
        font-weight: 300;
        font-size: 20px;
        color: #ffffff;
        line-height: 40px;
        &:nth-child(1) {
          width: 30%;
          padding-left: 30px;
        }
        &:nth-child(2) {
          width: 30%;
        }
        &:nth-child(3) {
          width: 40%;
        }
      }
    }
    .list {
      width: 100%;
      height: 460px;
      overflow: auto;
      .list-item {
        width: 100%;
        height: 41px;
        background: url("/images/new/celllist.png") no-repeat;
        background-size: 100% 100%;
        margin-bottom: 6px;
        display: flex;
        align-items: center;
        .list-cell {
          font-family: PingFangSC, PingFang SC;
          font-size: 20px;
          color: #ffffff;
          line-height: 41px;
          &:nth-child(1) {
            width: 30%;
            padding-left: 30px;
          }
          &:nth-child(2) {
            width: 30%;
          }
          &:nth-child(3) {
            width: 40%;
          }
          .btns {
            font-family: PingFangSC, PingFang SC;
            cursor: pointer;
            font-size: 20px;
            color: #8decff;
            &:nth-child(1) {
              margin-right: 20px;
            }
            &:nth-child(2) {
              margin-right: 20px;
            }
          }
        }
      }
    }
  }
}
</style>
